<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <!-- 
			v-show
				写法：v-show="表达式"
				适用于：切换频率较高的场景。
				特点：不展示的DOM元素依然在，仅仅是使用样式隐藏掉
		 -->
        <h1>当前的和为：{{sum}}</h1>
        <button @click='sum++'>点我+1</button>
        <h2 v-show='sum === 1'>Angular</h2>
        <h2 v-show='sum === 2'>React</h2>
        <h2 v-show='sum === 3'>Vue</h2>
        <h2 v-show='[1,2,3].indexOf(sum) === -1'>未知选项</h2>
    </div>
    <script>
        Vue.config.productionTip = false;

        new Vue({
            el:'#demo',
            data:{
                sum:0
            }
        })
    </script>
</body>

</html>